<template>
	<view class="container">
		<view class="details">
			<view class="title">维修信息</view>
			<view class="info">
				<view class="common">维修单号：</view>
				<view class="general">{{baseFormData.id}}</view>
			</view>
			<view class="info">
				<view class="common">车主姓名：</view>
				<view class="general">{{baseFormData.name}}</view>
			</view>
			<view class="info">
				<view class="common">联系方式：</view>
				<view class="phone">{{baseFormData.phone}}</view>
				<image src="@/static/电话.png"></image>
			</view>
			<view class="info">
				<view class="common">维修方式：</view>
				<view class="general"><text>{{baseFormData.type}}</text></view>
			</view>

			<view class="info" v-if="baseFormData.location && baseFormData.location.length > 0">
				<view class="common">取车位置：</view>
				<view class="address">{{baseFormData.location}}</view>
				<image src="@/static/导航.png"></image>
			</view>

			<view class="info">
				<view class="common">预约日期：</view>
				<view class="general">{{baseFormData.reservationTime}}</view>
			</view>
			<view class="info">
				<view class="common">提交日期：</view>
				<view class="general">{{baseFormData.submitTime}}</view>
			</view>
			<view class="info" v-if="isShow">
				<view class="common">到场时间：</view>
				<view class="general">2022/11/10 11:00</view>
			</view>
		</view>
		<view class="center">
			<view class="title">车辆信息</view>
			<view class="info">
				<view class="common">车辆类型：</view>
				<view class="general">
					<template v-if="baseFormData.carTypeId!== undefined">
						<span v-for="carType in carTypeIds" :key="carType.value"
							v-if="carType.value === baseFormData.carTypeId">
							{{ carType.text }}
						</span>
					</template>
				</view>
			</view>
			<view class="info">
				<view class="common">车牌号：</view>
				<view class="general">{{baseFormData.carNum}}</view>
			</view>
			<view class="info">
				<view class="common">整车照片：</view>
			</view>
			<view class="photo">
				<image :src="baseFormData.vehiclePhotos"></image>
			</view>
			<view class="info">
				<view class="common">维修部位照片：</view>
			</view>
			<view class="photo">
				<image :src="baseFormData.repairPhotos"></image>
				<!-- <image src="@/static/zhang.jpg"></image>
        <image src="@/static/zhang.jpg"></image> -->
			</view>
		</view>
		<view class="bottom">
			<button v-if="baseFormData.status === 0" class="button" :disabled="!isDisplay"
				:style="{ backgroundColor: baseFormData.status!=0? 'rgba(154,154,154,1)' : 'rgba(13,122,247,1)', display: isDisplay? 'block' : 'none' }"
				@click="toggle">
				<text class="button-text">{{ baseFormData.status!=0? '已到场' : '确认到场' }}</text>
			</button>
			<button @click="toggle1" v-if="baseFormData.status === 1" class="complete-button">确认完成</button>
			<button v-if="isCompleted" class="completed-button" disabled>已完成</button>
			<yfx-tooltip ref="tooltip"></yfx-tooltip>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				// isVerified: false,
				isCompleted: false,
				isShow: false,
				isDisplay: true,
				showConfirmCompleteButton: false,
				baseFormData: {
					carNum: "",
					carTypeId: 0,
					createBy: null,
					createTime: null,
					deleted: 0,
					id: 0,
					location: "",
					mid: 0,
					name: "",
					phone: "",
					remark: null,
					repairPhotos: "",
					reservationTime: "",
					status: 0,
					submitTime: "",
					type: "0",
					uid: 0,
					updateBy: null,
					updateTime: null,
					vehiclePhotos: "",
					verificationCode: null,
					verificationImg: null,
					isShow: false,
					isDisplay: true,
					showConfirmCompleteButton: false
				},
				carTypeIds: [{
						text: '轿车',
						value: 0
					},
					{
						text: 'SUV',
						value: 1
					},
					{
						text: 'MPV',
						value: 3
					}
					// 根据需要添加更多车辆类型
				],
			}
		},
		onLoad(options) {
			console.log(options)
			// 从页面路径参数中获取 id，如果没有传递 id 参数，默认值为 null
			this.id = options.id || null;
			console.log(this.id),
				this.selectReservationDetailsById(),
				this.getFuwuleixing();


			// 根据 status 设置按钮状态
			if (this.baseFormData.status === 0) {
				this.isDisplay = true;
				this.showConfirmCompleteButton = false;
			} else if (this.baseFormData.status === 1) {
				this.isDisplay = false;
				this.showConfirmCompleteButton = true;
			}
		},
		methods: {
			// 通过用户手机号(this.baseFormData.phone)作为参数
			sendSMSMessage() {
				uni.request({
					url: 'http://localhost:8080/merchant/send/'+this.baseFormData.phone,
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: '短信发送成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: '短信发送失败',
								icon: 'none'
							});
							console.error('请求失败', res);
						}
						this.showSuccessMsg = true;
						this.successMsg = '查询成功！';
					}
				});
			},

			getFuwuleixing() {
				// 验证成功，发送请求
				uni.request({
					url: 'http://localhost:8080/user/type/list',
					method: 'GET',
					header: {
						'Content-Type': 'application/json', // 设置请求头为 JSON 格式
						'Authorization': 'Bearer ' + wx.getStorageSync('token') // 设置认证令牌
					},
					success: (res) => {
						console.log(res)
						if (res.data.code === 200) {
							// 假设 res.data.rows 是一个包含对象的数组，每个对象有 id 和 name 属性
							this.carTypeIds = res.data.rows.map(item => ({
								text: item.name,
								value: item.id
							}));
						} else {
							console.error('请求失败', res);
						}
						this.showSuccessMsg = true;
						this.successMsg = '查询成功！';
					}
				});
			},
			selectReservationDetailsById() {
				// 验证成功，发送请求
				uni.request({
					url: `http://localhost:8080/merchant/reservation/${this.id}`,
					method: 'GET',
					header: {
						'Content-Type': 'application/json', // 设置请求头为 JSON 格式
						'Authorization': 'Bearer ' + uni.getStorageSync('token') // 设置认证令牌
					},
					success: (res) => {
						console.log(res)
						if (res.data.code === 200) {
							this.baseFormData = res.data.data
							console.log(this.baseFormData)
						} else {
							console.error('请求失败', res);
						}
						this.showSuccessMsg = true;
						this.successMsg = '查询成功！';
					}
				});
			},
			// 显示弹窗
			toggle() {
				this.$refs.tooltip.open({
					msg: "确认此订单",
					content: "请您仔细核对订单，此操作不可撤销，请谨慎操作",
					confirm: () => {
						uni.request({
							url: 'http://localhost:8080/merchant/reservation',
							method: 'PUT',
							data: {
								id: this.baseFormData.id,
								status: 1
							},
							header: {
								'Content-Type': 'application/json',
								'Authorization': 'Bearer ' + uni.getStorageSync('token')
							},
							success: (res) => {
								if (res.data.code === 200) {
									uni.showToast({
										title: '确认成功',
										icon: 'success'
									});
									// 设置状态以显示确认完成按钮
									this.baseFormData.status = 1;
									this.isDisplay = false;
									this.showConfirmCompleteButton = true;
								} else {
									uni.showToast({
										title: '确认失败',
										icon: 'none'
									});
									console.error('请求失败', res);
								}
								this.showSuccessMsg = true;
								this.successMsg = '查询成功！';
							}
						});
					},
					cancel: () => {
						console.log("点击取消按钮触发");
					}
				});
			},
			// 显示弹窗
			toggle1() {
				this.$refs.tooltip.open({
					msg: "确认完成订单",
					content: "请您仔细核对订单，此操作不可撤销，请谨慎操作",
					confirm: () => {
						uni.request({
							url: 'http://localhost:8080/merchant/reservation',
							method: 'PUT',
							data: {
								id: this.baseFormData.id,
								status: 2
							},
							header: {
								'Content-Type': 'application/json',
								'Authorization': 'Bearer ' + uni.getStorageSync('token')
							},
							success: (res) => {
								if (res.data.code === 200) {
									uni.showToast({
										title: '确认成功',
										icon: 'success'
									});
									// 发送维修完成短信提醒
									this.sendSMSMessage();
									// 设置状态以显示确认完成按钮
									this.baseFormData.status = 2;
									this.isDisplay = false;
									this.showConfirmCompleteButton = true;
									this.isCompleted = true;
									
								} else {
									uni.showToast({
										title: '确认失败',
										icon: 'none'
									});
									console.error('请求失败', res);
								}
								this.showSuccessMsg = true;
								this.successMsg = '查询成功！';
							}
						});
					},
					cancel: () => {
						console.log("点击取消按钮触发");
					}
				});
			}
		}
	};
</script>
<style>
	page {
		background-color: #fff;
	}

	/* 样式内容 */
	.hidden-button {
		display: none;
	}

	.details {
		margin: 20rpx;
		height: 510rpx;
	}

	.center {
		margin: 20rpx;
		height: 720rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.info {
		margin-top: 20rpx;
		font-size: 28rpx;
		display: flex;
	}

	.info image {
		width: 40rpx;
		height: 40rpx;
		margin-left: 150rpx;
	}

	.common {
		width: 240rpx;
	}

	.general {
		width: 450rpx;
	}

	.phone {
		font-size: 28rpx;
	}

	.address {
		font-size: 28rpx;
	}

	.photo {
		margin: 20rpx 0;
	}

	.photo image {
		width: 200rpx;
		height: 180rpx;
		margin: 0 15rpx;
	}

	.bottom {
		height: 220rpx;
	}

	.button {
		width: 524rpx;
		height: 80rpx;
		border-radius: 32rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: rgba(13, 122, 247, 1);
		color: rgba(255, 255, 255, 1);
		margin-top: 50rpx;
	}

	.complete-button {
		width: 524rpx;
		height: 80rpx;
		border-radius: 32rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: rgba(0, 200, 83, 1);
		color: rgba(255, 255, 255, 1);
		margin-top: 50rpx;
	}
</style>